<template>
  <!-- 会员信息 -->
  <div>
    <div class="content-box">
      <div class="title">
        <div class="col-xs-6">储值卡信息</div>
        <div class="col-xs-6" style="text-align: right;">
          <i class="glyphicon glyphicon-pencil" style="cursor: pointer;"></i>
        </div>
      </div>

      <el-form ref="form" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="会员卡号：">{{vipInfo.memberCard?vipInfo.memberCard.cardNumber:"暂无"}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员类型：">
              {{vipInfo.memberCard?vipInfo.memberCard.cardName:"暂无"}}
              <!-- <el-button @click="openSet(detail)" style="float:right;margin-top:5px;marigin-top:10px;">设置会员</el-button> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content-box">
      <div class="title">
        <div class="col-xs-6">会员权益</div>
        <div class="col-xs-6" style="text-align: right;">
          <i class="glyphicon glyphicon-pencil" style="cursor: pointer;"></i>
        </div>
      </div>
      <el-form  label-width="100px">
        <el-row :gutter="20">
          <el-col  :span="24">
            <el-form-item label="权益描述：">{{vipInfo.memberCard?vipInfo.memberCard.memberEnjoy:""}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content-box">
      <div class="title">
        <div class="col-xs-6">储值卡情况</div>
        <div class="col-xs-6" style="text-align: right;">
          <i class="glyphicon glyphicon-pencil" style="cursor: pointer;"></i>
        </div>
      </div>

      <el-form  label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="账户余额：">
              <span>￥{{vipInfo.account?vipInfo.account.amount:0}}</span>
              <el-button style="margin-left:20px;" size="mini" @click="onJoin">充值</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="累计赠送：">
              <span>￥{{vipInfo.account?vipInfo.account.giveAmount:0}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="累计充值：">
              <span>￥{{vipInfo.account?vipInfo.account.totalRecharge:0}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="累计消费：">
              <span>￥{{vipInfo.account?vipInfo.account.totalConsume:0}}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            
            <el-button @click="openRefund">退款</el-button>
            <el-button @click="openRecord">查看记录</el-button>
          </el-col>-->
        </el-row>
      </el-form>
    </div>
    <div class="content-box">
      <div class="title">
        <div class="col-xs-6">
          <label
            class="label-record"
            :class="recordType==1?'active-record':''"
            @click="getRrcordList(1)"
          >充值记录</label> /
          <label
            @click="getRrcordList(2)"
            :class="recordType==2?'active-record':''"
            class="label-record"
          >退款记录</label>
        </div>
        <div class="col-xs-6" style="text-align: right;">
          <i class="glyphicon glyphicon-pencil" style="cursor: pointer;"></i>
        </div>
      </div>
      <el-row>
        <el-col :span="12" style="height:10px;"></el-col>
        <el-col :span="12">
          <el-button style="float:right;margin-right:10px;" @click="exportExcel()">导出</el-button>
        </el-col>
      </el-row>
      <table class="table-box printOrder-data">
        <thead>
          <tr>
            <th>{{recordType==1?"充值":'退款'}}金额</th>
            <th v-if="recordType==1">赠送金额</th>
            <th>{{recordType==1?"充值":'退款'}}时间</th>
            <th>账户余额</th>
            <th>备注</th>
            <th>操作人员</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableList" :key="index">
            <td>{{item.changeAmount}}</td>
            <td v-if="recordType==1">{{item.giveAmount}}</td>
            <td>{{item.gmtCreate}}</td>
            <td>{{item.balance}}</td>
            <td>{{item.remark}}</td>
            <td>{{item.operatorName}}</td>
            <td>
              <el-link class="link-print" @click="printPay(item)">打印</el-link>
              <el-link v-if="item.status==0 && item.type==1" @click="openRefund(item)">退款</el-link>
              <el-link v-if="item.status!=0 && item.type==1" @click="getRrcordList(2)">已退款</el-link>
            </td>
          </tr>
          <tr v-if="tableList.length<1">
            <td colspan="8" style="text-align:center;">暂无数据</td>
          </tr>
        </tbody>
      </table>
      <br />
      <pager v-model="pager" @change-pagenum="getRrcordList(recordType)"></pager>
    </div>
    <set v-model="dialogEdit" v-if="dialogEdit" :curItem="detail" @success="getVipInfo"></set>
    <pay v-model="dialogJoin" v-if="dialogJoin" :curItem="detail" @success="onSueccess"></pay>
    <refund
      v-model="dialogRefund"
      v-if="dialogRefund"
      :curItem="detail"
      :vip="curItem"
      @success="onSueccess"
    ></refund>
    <iframe
      v-show="showRecharge"
      frameborder="0"
      height="0px"
      width="0px"
      ref="iframe"
      src="/print/note.html"
    ></iframe>
    <!-- <list v-model="dialogList" v-if="dialogList" :curItem="detail" :vip="vipInfo"></list> -->
  </div>
</template>
<script>
import Excel from "@/_js/excel.js";
export default {
  props: ["detail"],
  data() {
    return {
      dialogJoin: false,
      dialogEdit: false, //支付
      dialogRefund: false, //退款
      dialogList: false, //充值记录
      curItem: null,
      vipInfo: "",
      tableList: [],
      pager: { pageSize: 10, pageNum: 1, total: 0 },
      showRecharge: false,
      iframeContent: {},
      recordType: 1,
    };
  },
  mounted() {
    let th = this;
    this.$nextTick(function () {
      th.getVipInfo();
      th.getRrcordList(1);
    });
  },
  methods: {
    //充值
    onJoin(obj) {
      this.dialogJoin = true;
      this.curItem = obj;
    },
    //设置会员
    openSet() {
      let th = this;
      th.dialogEdit = true;
    },
    //退款
    openRefund(obj) {
      this.dialogRefund = true;
      this.curItem = obj;
    },
    //充值记录
    openRecord() {
      let th = this;
      th.dialogList = true;
    },
    getVipInfo() {
      this.$api
        .getPatientMemberInfo({ patientId: this.detail.patientId })
        .then((res) => {
          if (res.executed) {
            this.vipInfo = res.dataBody;
          }
        });
    },
    //获取充值记录
    getRrcordList(type) {
      this.pager.pageNum = this.recordType == type ? this.pager.pageNum : 1;
      this.recordType = type;
      let j = { type: this.recordType, patientId: this.detail.patientId };
      Object.assign(j, this.pager);
      this.$api.rechargeRecordList(j).then((res) => {
        if (res.executed) {
          this.tableList = res.dataBody.list ? res.dataBody.list : [];
          this.pager.total = res.dataBody.total;
        } else {
          this.tableList = [];
          this.pager.total = 0;
        }
      });
    },
    //打印
    printPay(obj) {
      let th = this;
      th.showRecharge = true;
      th.iframeContent = this.$refs.iframe.contentWindow;
      let list = [];
      list.push(obj);
      th.iframeContent.postMessage(
        {
          cmd: "postJson",
          params: JSON.stringify({
            detail: th.detail,
            itemList: list,
            type: th.recordType,
            logo: th.adminUser.printLogo,
            hospitalName: th.adminUser.hospitalName,
            sfTotal: obj.changeAmount,
            balanceMoney: th.vipInfo.account.amount,
            memberName: obj.operatorName,
            time: obj.gmtCreate.substring(0, 10),
          }),
        },
        "*"
      );
    },
    getDetail() {
      let th = this;
      th.$emit("success");
    },
    onSueccess() {
      this.getVipInfo();
      this.getRrcordList(1);
      this.getDetail();
    },
    exportExcel() {
      let th = this;
      let data = [];
      th.$api
        .rechargeRecordList({
          type: this.recordType,
          patientId: this.detail.patientId,
          pageNum: 1,
          pageSize: 500,
        })
        .then((res) => {
          if (res.executed) {
            data = res.dataBody.list;
            let list = [];
            let title = this.recordType == 1 ? "充值记录" : "退款记录";
            list =
              this.recordType == 1
                ? [
                    { key: "changeAmount", name: "充值金额" },
                    { key: "giveAmount", name: "赠送金额" },
                    { key: "gmtCreate", name: "充值时间" },
                    { key: "balance", name: "账户余额" },
                    { key: "remark", name: "备注" },
                    { key: "operatorName", name: "操作人员" },
                  ]
                : [
                    { key: "changeAmount", name: "退款金额" },
                    { key: "gmtCreate", name: "退款时间" },
                    { key: "balance", name: "账户余额" },
                    { key: "remark", name: "备注" },
                    { key: "operatorName", name: "操作人员" },
                  ];
            Excel(data, list, title);
          }
        });
    },
  },
  components: {
    set: () => import("../_com/setVip.vue"),
    pay: () => import("../_com/payV2.vue"),
    refund: () => import("../_com/refundV2.vue"),
    list: () => import("../_com/recordListV2.vue"),
  },
};
</script>
<style lang="scss" scoped>
@import "../_css/detail.scss";
.vip_info {
  display: inline-block;
  width: 100%;
  padding: 0px;
  border-bottom: 1px solid #eee;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  li {
    width: 50%;
    display: inline-block;
    text-indent: 10px;
    line-height: 35px;
  }
}
.content-box {
  border: none;
}
.visit_detail_box .content-box .title {
  padding-left: 0;
  background: none;
}
.visit_detail_box .content-box table {
  border: none;
}
.label-record {
  color: #999;
  cursor: pointer;
}
.active-record {
  color: #000;
}
.link-print {
  margin-right: 10px;
}
</style>

